<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head th:include="common/common :: bootcss">
    <title>车辆管理</title>
    <script>

        var carStatusMap = {
            0 : "待审",
            1 : "通过",
            2 : "拒绝"
        };

        function getCarDetail(carId) {
            $.post("/admin/car/get", {
                carId : carId
            }, function (data) {
                $("#dt-carId").val(data.data.carId);
                $("#dt-mobile").val(data.data.mobile);
                $("#dt-createTime").val(data.data.createTime);
                $("#dt-carPlateNumber").val(data.data.carPlateNumber);
                $("#dt-carType").val(data.data.carType);
                $("#dt-carModel").val(data.data.carModel);
                $("#dt-carSeat").val(data.data.carSeat);
                $("#dt-carPicFront").val(data.data.carPicFront);
                $("#dt-carPicLicense").val(data.data.carPicLicense);
                $("#dt-carErrMsg").val(data.data.carErrMsg);
                $("#dt-carStatus").val(carStatusMap[data.data.carStatus]);
                $("#dt-carPicFront").attr("src" ,"/upload/" + data.data.carPicFront);
                $("#dt-carPicLicense").attr("src", "/upload/" + data.data.carPicLicense);

                if (data.data.carStatus == 0) {
                    $("#btAuditPass").show();
                    $("#btAuditReject").show();
                    $("#dt-carStatus").parent().hide();
                    $("#dt-carErrMsg").removeAttr("disabled");
                } else {
                    $("#btAuditPass").hide();
                    $("#btAuditReject").hide();
                    $("#dt-carStatus").parent().show();
                    $("#dt-carErrMsg").attr("disabled", "disabled");
                }

            });
        }

        $(document).ready(function() {
            var page = {
                pageNum : 1,
                pageSize : 10,
                pages : 0,
                total : 0
            };

            function query(increment) {
                if (increment < 0 && page.pageNum == 1) {
                    return;
                }
                if (increment > 0 && page.pageNum >= page.pages) {
                    return;
                }

                page.pageNum += increment;

                $.post("/admin/car/list", {
                    mobile : $("#mobile").val().trim(),
                    carPlateNumber : $("#carPlateNumber").val().trim(),
                    carStatus : $("#carStatus").val().trim(),
                    pageNum : page.pageNum,
                    pageSize : page.pageSize
                }, function(data) {
                    if (!data.success) {
                        console.log(data.errorMsg);
                    } else {
                        var html = "";
                        page.pages = data.pages;
                        page.total = data.total;
                        data.data.forEach(function (t) {
                            html += "<tr>";
                            html += "<td>" + t.carId + "</td>";
                            html += "<td>" + t.mobile + "</td>";
                            html += "<td>" + t.carPlateNumber + "</td>";
                            html += "<td>" + t.carModel + "</td>";
                            html += "<td>" + t.createTime + "</td>";
                            html += "<td>" + carStatusMap[t.carStatus] + "</td>";
                            html += "<td><button type='button' class='btn btn-xs' onclick='getCarDetail(" + t.carId + ")' data-toggle='modal' data-target='#carDetailModal'>详情</button></td>";
                            html += "</tr>";
                        })
                        $(".table > tbody").html(html);
                        if (page.pageNum == 1) {
                            $("#liPrePage").addClass("disabled");
                        } else {
                            $("#liPrePage").removeClass("disabled")
                        }
                        if (page.pages > 1 && page.pageNum < page.pages) {
                            $("#liNextPage").removeClass("disabled");
                        } else {
                            $("#liNextPage").addClass("disabled");
                        }
                    }
                });

                $.post("/admin/car/countInfo", function (data) {
                    if (!data.success) {
                        console.log(data.errorMsg);
                    } else {
                        var waitAudit = data.data[0] != undefined ? data.data[0] : 0;
                        var auditSuccess = data.data[1] != undefined ? data.data[1] : 0;
                        var auditFail = data.data[2] != undefined ? data.data[2] : 0;
                        var total = waitAudit + auditSuccess + auditFail;
                        $("#countInfo").html("总共" + total + "申请，通过" + auditSuccess);
                    }
                });
            }

            $("#btCarSearch").click(function () {
                query(0);
            });
            $("#btNextPage").click(function () {
                query(1);
            });
            $("#btPrePage").click(function () {
                query(-1);
            });
            $("#btAuditPass").click(function () {
                $.post("/admin/car/audit", {
                    carId: $("#dt-carId").val(),
                    pass : true
                }, function(data) {
                    query(0);
                    if (!data.success) {
                        console.log(data.errorMsg);
                    }
                });
            });
            $("#btAuditReject").click(function () {
                $.post("/admin/car/audit", {
                    carId: $("#dt-carId").val(),
                    pass : false,
                    carErrMsg : $("#dt-carErrMsg").val()
                }, function(data) {
                    query(0);
                    if (!data.success) {
                        console.log(date.errorMsg);
                    }
                });
            });

            query(0);
        });
    </script>
</head>
<body>
<ol class="breadcrumb">
    <li><a th:href="@{/admin/car/}">车辆审核列表</a></li>
</ol>
<form id="formCarSearch" class="form-inline" style="padding-bottom: 10px">
    <div class="form-group">
        <label for="mobile">用户账号</label>
        <input type="text" class="form-control" id="mobile" placeholder="用户账号">
    </div>
    <div class="form-group">
        <label for="carPlateNumber">车牌号码</label>
        <input type="text" class="form-control" id="carPlateNumber" placeholder="车牌号码">
    </div>
    <div class="form-group">
        <label for="carStatus">状态</label>
        <select id="carStatus" class="form-control">
            <option value="">全部</option>
            <option value="0">待审</option>
            <option value="1">审核通过</option>
            <option value="2">审核拒绝</option>
        </select>
    </div>
    <button id="btCarSearch" type="button" class="btn btn-default">搜索</button>
</form>
<div style="padding-bottom: 10px">
    <span id="countInfo"></span>
</div>
<table class="table">
    <thead>
    <tr>
        <th>ID</th>
        <th>用户账号</th>
        <th>车牌号码</th>
        <th>车辆型号</th>
        <th>申请时间</th>
        <th>状态</th>
        <th>详情</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<ul class="pager">
    <li class="disabled" id="liPrePage"><a id="btPrePage" href="javascript:void(0);"><</a></li>
    <li id="liNextPage"><a id="btNextPage" href="javascript:void(0);" >></a></li>
</ul>

<div class="modal fade" tabindex="-1" role="dialog" id="carDetailModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">车辆详情</h4>
            </div>
            <div class="modal-body">
                <form>
                    <input type="hidden" id="dt-carId">
                    <div class="form-group">
                        <label for="dt-mobile">用户账号</label>
                        <input type="text" class="form-control" id="dt-mobile" disabled >
                    </div>
                    <div class="form-group">
                        <label for="dt-createTime">提交时间</label>
                        <input type="text" class="form-control" id="dt-createTime" disabled >
                    </div>
                    <div class="form-group">
                        <label for="dt-carPlateNumber">车牌号码</label>
                        <input type="text" class="form-control" id="dt-carPlateNumber" disabled>
                    </div>
                    <div class="form-group">
                        <label for="dt-carType">车辆类型</label>
                        <input type="text" class="form-control" id="dt-carType" disabled>
                    </div>
                    <div class="form-group">
                        <label for="dt-carModel">车辆型号</label>
                        <input type="text" class="form-control" id="dt-carModel" disabled>
                    </div>
                    <div class="form-group">
                        <label for="dt-carSeat">座位数</label>
                        <input type="text" class="form-control" id="dt-carSeat" disabled>
                    </div>
                    <div class="form-group">
                        <div><label for="dt-carPicFront">车辆照片</label></div>
                        <img id="dt-carPicFront" alt="车辆照片" class="img-rounded" height="400px" >
                    </div>
                    <div class="form-group">
                        <div><label for="dt-carPicLicense">行驶本照片</label></div>
                        <img id="dt-carPicLicense" alt="行驶本照片" class="img-rounded" height="400px" >
                    </div>
                    <div class="form-group">
                        <label for="dt-carErrMsg">原因</label>
                        <textarea class="form-control" id="dt-carErrMsg" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="dt-carStatus">状态</label>
                        <input type="text" class="form-control" id="dt-carStatus" disabled>
                    </div>
                    <button type="button" class="btn btn-default"  data-dismiss="modal" id="btAuditPass">同意</button>
                    <button type="button" class="btn btn-default"  data-dismiss="modal" id="btAuditReject">不同意</button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!--<button type="button" class="btn btn-primary">保存更改</button>-->
            </div>
        </div>
    </div>
</div>

</body>
</html>